<template>
  <div class="mine">
 <div class="top">
            <div class="login">
                <div class="tx" v-if="this.$store.state.user">
                    <div>
                        <img src="../assets/img/教育APP切图/个人中心/头像@2x.png" alt="">
                        <a href=""><img src="../assets/img/教育APP切图/个人中心/修改头像@2x.png" alt=""></a>
                    </div>
                    <div>
                        <p class="user">{{user}}</p>
                        <p class="phone">{{phone}}</p>
                    </div>
                </div>
                <div class="tx1" v-if="!this.$store.state.user">
                    <div>
                        <img src="../assets/img/教育APP切图/个人中心/头像-灰色@2x.png" alt="">
                        <a href=""><img src="../assets/img/教育APP切图/个人中心/修改头像@2x.png" alt=""></a>
                    </div>
                    <div>
                        <p><router-link to="/myLogin" tag="a">登录/注册</router-link></p>
                    </div>
                </div>
                <a href=""><i class="iconfont icon-lingdang-xianxing"></i></a>
            </div>
            <div class="hy">
                <a href=""><img src="../assets/img/教育APP切图/个人中心/VIP中心@2x.png" alt=""></a>
            </div>
        </div>
        <div class="down">
            <div class="list">
                <div>
                    <span><img src="../assets/img/教育APP切图/个人中心/学习icon@2x.png" alt=""></span>
                    <span>我的已学</span>
                </div>
            </div>
            <div class="list">
                <div>
                    <span><img src="../assets/img/教育APP切图/个人中心/下载icon@2x.png" alt=""></span>
                    <span>我的下载</span>
                </div>
            </div>
            <div class="list">
                <div>
                    <span><img src="../assets/img/教育APP切图/个人中心/收藏icon@2x.png" alt=""></span>
                    <span>我的收藏</span>
                </div>
            </div>
            <div class="list">
                <div>
                    <span><img src="../assets/img/教育APP切图/个人中心/关注icon@2x.png" alt=""></span>
                    <span>我的关注</span>
                </div>
            </div>
            <div class="list">
                <div>
                    <span><img src="../assets/img/教育APP切图/个人中心/点赞icon@2x.png" alt=""></span>
                    <span>我的点赞</span>
                </div>
            </div>
            <div class="list">
                <div class="sz2">
                    <span><img src="../assets/img/教育APP切图/个人中心/专辑icon@2x.png" alt=""></span>
                    <span>专辑</span>
                </div>
            </div>
            <div class="list set">
                <div class="sz2">
                    <span><img src="../assets/img/教育APP切图/个人中心/设置icon@2x.png" alt=""></span>
                    <router-link to="/setUp" tag="span">设置</router-link>
                </div>
            </div>
            

        </div>

    <my-footer></my-footer>

  </div>
</template>

<script>
import myFooter from '@/components/myFooter.vue'


export default {
    
  name: 'myMine',
  data() {
      return {
          user:'',
          phone:''
      }
  },
  mounted() {
      console.log(this.$store.state.user);
      if (sessionStorage.getItem('user')) {
          this.user=JSON.parse(sessionStorage.getItem('user')).userName
          this.phone=JSON.parse(sessionStorage.getItem('user')).phone
      } 
  },
     
  
  components: {
    myFooter
  }
}
</script>
<style lang="scss" scoped>
    .big {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.top {
    height: 38rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 3rem;
}

.login {
    width: 100%;
    font-size: 3.2rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tx,
.tx1 {
    width: 38rem;
    height: 11.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tx img,
.tx1 img {
    width: 11.6rem;
    height: 11.6rem;
}

.tx>div>a>img,
.tx1>div>a>img {
    width: 3.6rem;
    height: 3.6rem;
}

.tx>div,
.tx1>div {
    position: relative;
}

.tx>div>a,
.tx1>div>a {
    position: absolute;
    right: 0;
    bottom: 0;
}

// .tx {
//     display: none;
// }

.hy {
    width: 69.8rem;
    height: 15rem;
    img {
        width: 69.8rem;
        height: 13.6rem;
    }
}


/* down */

.down {
    width: 100%;
    padding: 0 4rem;
}

.list {
    height: 11rem;
    width: 100%;
    border-bottom: 0.1rem solid #f2f2f2;
    >div {
        width: 19.7rem;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    img {
        width: 3rem;
        height: 3.2rem;
    }
    span {
        font-size: 3rem;
    }
}

.sz2 {
    padding-right: 6.5rem;
}


/* gd */

.gd {
    width: 100%;
    height: 9.8rem;
}

.box {
    position: fixed;
    bottom: 0;
}
</style>